<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 用户管理</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../js/utils.js"></script>
<!--    <script type="text/javascript" src="../../js/utils.js"></script>-->
    <script src="../../js/api.js"></script>
    <script type="module" src="../../js/components/navigation.js"></script>
    <!--    <script type="module" src="../../js/jquery-1.8.3.js"></script>-->

    <!-- 用户管理展示部分，去下面了->nono我给提上来了 -->

    <script type="text/javascript">

        $(document).ready(function () {

            //1. A。登录成功--->该页：不带条件，默认第一页
            show(1, "");

            //2.B.点击查询按钮---该页： 带条件，默认第一页
            $("[id='search-btn']").click(function () {
                var search = $('#search-input').val();
                show(1, search);
            });

            // 搜索 回车 事件
            $('#search-input').keypress(function (event) {
                if (event.keyCode == 13) {
                    var search = $('#search-input').val();
                    show(1, search);
                }
            });

            // 执行删除操作
            // 事件委托方式（推荐，支持动态添加的按钮）
            $(document).on('click', '.delete-btn', function () {

                // 获取 删除按钮对应的 用户名delusername
                const delusername = $(this).attr('delusername');
                // alert("点击按钮后，得到的我要删除的delusername：" + delusername + " *** line120 ***");//undefined

                // alert("准备删除的用户：" + delusername); //undefined

                // 调用删除函数
                deleteUser2(delusername);
                // alert("deleteUser2执行完了，展示show(1,'')");
                // show(1,"");// 立即刷新列表 → 此时接口可能还没返回，删除未生效
            });

        });

        function show(indexpage, search) {
            $.get("/hrm/users/getListByPage", {"indexpage": indexpage, "search": search}, function (ph) {
                JSON.stringify(ph);

                $("#user-table-body").empty();
                if (ph.listIndex.length == 0) {
                    $("                <tr>\n" +
                        "                <td colspan='6'>(＞人＜；)对不起，没有符合的查询记录！</td>\n" +
                        "            </tr>").appendTo("#user-table-body");
                } else {
                    showUserList(ph)
                }

                //显示列表
                function showUserList(ph) {
                    // 先清空表格内容，避免重复添加
                    $("#user-table-body").empty();

                    for (var i = 0; i < ph.listIndex.length; i++) {
                        var obj = ph.listIndex[i];
                        var formattedTime = Formatter.formatDateTime(obj.createdAt);

                        //检查当前用户是否为管理员，决定是否显示删除按钮
                        var deleteBtn = "";

                        // 1. 从 localStorage 读取 isAdmin（注意：需转为布尔值，因为存的是字符串）
                        // （解释：localStorage 存的 "true"/"false" 是字符串，直接用会有逻辑错误，所以要和 "true" 对比转布尔）
                        const isadmin = localStorage.getItem("isadmin") === "true";

                        if(isadmin){ //是管理员
                            deleteBtn = `<button class='btn btn-danger delete-btn' delusername='${obj.userName}'>删除</button>`;
                        } else {
                            deleteBtn = `<button class='btn btn-danger delete-btn' disabled>删除</button>`;
                        }

                        $("                <tr>\n" +
                            "                <td>" + obj.userName + "</td>\n" +
                            "                <td>" + obj.name + "</td>\n" +
                            "                <td>" + obj.email + "</td>\n" +
                            "                <td>" + obj.phoneNumber + "</td>\n" +
                            "                <td>" + obj.role + "</td>\n" +
                            // "                <td>" + obj.status + "</td>\n" +
                            "                <td>" + formattedTime + "</td>\n" +
                            /*删除只有 role.equals("管理员") 的时候才能删，不然就弹窗 alert("只有管理者才能进行删除操作！") "+'"用户id，后续填写保存，这句话在 user.html line76 "+"'  */
                            // "                <td><button class='btn btn-danger delete-btn' data-id='deluserId'>删除</button></td>" +
                            "                <td>" + deleteBtn + "</td>\n" +
                            "            </tr>").appendTo("#user-table-body");
                    }
                }

                //更新 页数展示
                function updatePageInfo() {
                    //更新 页数 信息()前
                    $("#current-page").text(ph.pageIndex);
                    $("#total-pages").text(ph.pageCount);

                    //更新 页数 信息()后
                    $("#page-info").text("第" + ph.pageIndex + "页/共" + ph.pageCount + "页");
                }

                //初始化
                updatePageInfo();

                //上一页按钮事件：先解绑 off()，再绑定 on()
                $(document).off("click", "#prev-page").on("click", "#prev-page", function () {
                    if (ph.pageIndex === 1) {
                        alert("已经是第一页！");
                        return;
                    } else {
                        ph.pageIndex = ph.pageIndex - 1;
                        show(ph.pageIndex, search);
                        updatePageInfo();
                    }
                });
                //下一页按钮事件：先解绑 off()，再绑定 on()
                $(document).off("click", "#next-page").on("click", "#next-page", function () {
                    if (ph.pageIndex === ph.pageCount) {
                        alert("已经是最后一页！");
                        return;
                    } else {
                        ph.pageIndex = ph.pageIndex + 1;
                        show(ph.pageIndex, search);
                        updatePageInfo();
                    }
                });

                /*// 或者直接绑定（仅适用于静态按钮）
                $('.delete-btn').click(function () {
                    const id = $(this).data('id');
                    deleteUser(id);
                });*/

            });

        }

        // 用户删除
        function deleteUser2(delusername) {
            if (confirm('确定删除用户 '+delusername+'？')) {
                // alert("deleteUser2 的 if语句 和 $.get 之间 ***"); // ok
                $.get("/hrm/users/deleteUser", {"delusername": delusername}, function (data) {

                    // alert("$.get 进来了***，delusername："+delusername);

                    // alert("执行了localStorage.setItem('successDeleteUser', data.delBoo);***");

                    // const booDelUser = localStorage.getItem("successDeleteUser") === "true";
                    const booDelUser = data.successDeleteUser === true;
                    // alert("转换booDelUser的类型为布尔类型--值："+booDelUser+"***");

                    if (booDelUser) {
                        alert("删除成功");
                        show(1,"");
                    } else {
                        alert("删除失败");
                    }
                }).fail(function(error){
                    console.error('Failed to delete user:', error);
                    alert("删除失败，请重试！")
                });
            }else{
                alert("取消删除");
            }
        }

    </script>

    <!-- 原有脚本 -->
    <script>
        $(document).ready(function () {
            // 检查登录状态
            checkLoginStatus();

            // 显示用户名
            const username = localStorage.getItem('username');
            if (username) {
                $('#username-display').text(username);
            }

            // 退出登录
            $('#logout-btn').click(function () {
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                localStorage.removeItem('userId');
                localStorage.removeItem('userId');
                /*localStorage.clear();*/
                window.location.href = '../../index.html';
            });

            // 分页按钮
            /*let currentPage = 1;
            const pageSize = 10;*/

            /*// 搜索按钮点击事件
            $('#search-btn').click(function () {
                currentPage = 1;
                loadUserData();
            });*/

            // 重置按钮点击事件
            $('#reset-btn').click(function () {
                $('#search-input').val('');
                currentPage = 1;
                loadUserData();
            });

            /*// 
            $('#search-input').keypress(function (e) {
                if (e.which === 13) {
                    currentPage = 1;
                    loadUserData();
                }
            });*/

            /*// 上一页按钮点击事件
            $('#prev-page').click(function () {
                if (currentPage > 1) {
                    currentPage--;
                    loadUserData();
                }
            });

            // 下一页按钮点击事件
            $('#next-page').click(function () {
                // 总页数将在加载数据后更新
                const totalPages = Math.ceil(($('#total-users').text() || 0) / pageSize) || 1;
                if (currentPage < totalPages) {
                    currentPage++;
                    loadUserData();
                }
            });*/

            // 添加用户按钮点击事件
            $('#add-user-btn').click(function () {
                // 清空表单
                $('#user-form')[0].reset();
                $('#user-id').val('');
                // 显示密码相关字段
                $('#password-group').show();
                $('#confirm-password-group').show();
                // 设置模态框标题
                $('#modal-title').text('添加用户');
                // 显示模态框
                // $('#user-modal').modal('show');
                // 显示模态框 - 使用Bootstrap的模态框方法
                const userModal = new bootstrap.Modal(document.getElementById('user-modal'));
                userModal.show();  // 使用实例化对象的show()方法

                // 使用Bootstrap模态框的隐藏事件
                const userModalElement = document.getElementById('user-modal');
                userModalElement.addEventListener('hidden.bs.modal', function () {
                    // 模态框隐藏时的清理工作
                    $('#user-form')[0].reset();
                    // 新增：清空当前焦点，避免焦点残留
                    document.activeElement.blur();
                });

            });

            /*              //**********改了
                            // 关闭模态框
                            $('.close-btn, #cancel-btn').click(function () {
                                $('#user-modal').modal('hide');
                            });

                            // 点击模态框外部关闭模态框
                            $(window).click(function (event) {
                                if (event.target === document.getElementById('user-modal')) {
                                    // $('#user-modal').hide(); //修改前的 原来的代码
                                    $('#user-modal').modal('hide');  //豆包建议修改
                                }
                            });
            */
            /* ******************* 修改后↓ *********************/

            // 统一关闭模态框的方法
            function closeModal() {
                const userModal = bootstrap.Modal.getInstance(document.getElementById('user-modal'));
                if (userModal) {
                    userModal.hide();  // 使用正确的hide()方法
                }
            }

            // 修改取消按钮点击事件
            $('#cancel-btn').click(closeModal);

            // 使用Bootstrap模态框的隐藏事件
            const userModalElement = document.getElementById('user-modal');
            userModalElement.addEventListener('hidden.bs.modal', function () {
                // 模态框隐藏时的清理工作
                $('#user-form')[0].reset();
            });
            // 移除了自定义的点击外部关闭逻辑（使用Bootstrap默认行为）
            /* ******************* 修改后↑ *********************/


            // 保存用户按钮点击事件 -- 添加用户里的
            $('#save-user-btn').click(function () {
                saveUser();
            });

            function checkLoginStatus() {
                const token = localStorage.getItem('token');
                if (!token) {
                    window.location.href = '../../index.html';
                }
            }

            /*function loadUserData() {
                const searchKeyword = $('#search-input').val().trim();

                // 调用API加载用户数据
                window.api.user.getList(searchKeyword, currentPage, pageSize)
                    .then(data => {
                        // 更新表格数据
                        updateTableData(data.users);

                        // 更新分页信息
                        updatePagination(data.totalCount);
                    })
                    .catch(error => {
                        console.error('Failed to load user data:', error);
                        alert('加载用户数据失败，请重试');
                    });
            }*/

            /*function updateTableData(users) {
                const tableBody = $('#user-table-body');
                tableBody.empty();

                if (users && users.length > 0) {
                    users.forEach(user => {
                        const row = $('<tr></tr>');
                        row.append(`<td>${user.username}</td>`);
                        row.append(`<td>${user.username}</td>`);
                        row.append(`<td>${user.realName}</td>`);
                        row.append(`<td>${user.email}</td>`);
                        row.append(`<td>${user.phone}</td>`);
                        row.append(`<td>${getRoleName(user.role)}</td>`);
                        row.append(`<td><span class="badge ${user.status === 'active' ? 'bg-success' : 'bg-secondary'}">${getStatusName(user.status)}</span></td>`);
                        row.append(`<td>${user.createTime}</td>`);
                        row.append(`<td>
                        <button class="btn btn-sm btn-primary" onclick="editUser(${user.id})">编辑</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteUser(${user.id})">删除</button>
                        <button class="btn btn-sm btn-secondary" onclick="toggleUserStatus(${user.id}, '${user.status}')">${user.status === 'active' ? '禁用' : '启用'}</button>
                    </td>`);
                        tableBody.append(row);
                    });
                }
            }*/

            /*function updatePagination(totalCount) {
                const totalPages = Math.ceil(totalCount / pageSize) || 1;
                $('#page-info').text(`第 ${currentPage} 页 / 共 ${totalPages} 页`);

                // 禁用/启用分页按钮
                if (currentPage === 1) {
                    $('#prev-page').prop('disabled', true);
                } else {
                    $('#prev-page').prop('disabled', false);
                }

                if (currentPage >= totalPages) {
                    $('#next-page').prop('disabled', true);
                } else {
                    $('#next-page').prop('disabled', false);
                }
            }*/

            /* 添加用户 */
            function saveUser() {
                // 表单验证
                if (!validateUserForm()) {
                    return;
                }

                // 获取表单数据
                const formData = {
                    id: $('#user-id').val().trim(), /* userId   ‘#userId’ */ /*，。、、‘’“”？！《——》【】￥……·（）*/
                    username: $('#username').val().trim(),  /* userName   ’#userName‘ */
                    realName: $('#real-name').val().trim(),  /* realName   ‘realName’*/
                    email: $('#email').val().trim(),
                    phone: $('#phone').val().trim(),  /* phoneNumber   'phomhNumber' */
                    role: $('#role').val().trim()
                };

                // 如果是添加用户，包含密码
                if (!formData.id) {
                    formData.password = $('#password').val().trim();
                }

                // 调用API保存用户
                const savePromise = formData.id ?
                    window.api.user.update(formData) :
                    window.api.user.create(formData);

                savePromise
                    .then(response => {
                        if (response) {
                            alert(formData.id ? '更新成功' : '添加成功');
                            $('#user-modal').hide();
                            loadUserData();
                        } else {
                            alert(formData.id ? '更新失败' : '添加失败');
                        }
                    })
                    .catch(error => {
                        console.error('Failed to save user:', error);
                        alert('保存失败，请重试');
                    });
            }

            function validateUserForm() {
                let isValid = true;

                // 验证用户名
                const username = $('#username').val().trim();
                if (!username) {
                    alert('请输入用户名');
                    isValid = false;
                }

                // 验证真实姓名
                const realName = $('#real-name').val().trim();
                if (!realName) {
                    alert('请输入真实姓名');
                    isValid = false;
                }

                // 验证邮箱
                const email = $('#email').val().trim();
                if (!email || !Validator.isEmail(email)) {
                    alert('请输入有效的邮箱');
                    isValid = false;
                }

                // 验证手机号
                const phone = $('#phone').val().trim();
                if (!phone || !Validator.isPhone(phone)) {
                    alert('请输入有效的手机号');
                    isValid = false;
                }

                // 验证角色
                const role = $('#role').val().trim();
                if (!role) {
                    alert('请选择角色');
                    isValid = false;
                }

                // 如果是添加用户，验证密码
                if (!$('#user-id').val().trim()) {
                    const password = $('#password').val().trim();
                    const confirmPassword = $('#confirm-password').val().trim();

                    if (!password || password.length < 6) {
                        alert('密码长度不能少于6位');
                        isValid = false;
                    }

                    if (password !== confirmPassword) {
                        alert('两次输入的密码不一致');
                        isValid = false;
                    }
                }

                return isValid;
            }

            function getRoleName(roleCode) {
                const roleMap = {
                    'admin': '管理员',
                    'manager': '经理',
                    'staff': '员工'
                };
                return roleMap[roleCode] || roleCode;
            }

            function getStatusName(statusCode) {
                const statusMap = {
                    'active': '启用',
                    'inactive': '禁用'
                };
                return statusMap[statusCode] || statusCode;
            }

            /* 干嘛用的？？ */
            // 全局函数
            window.editUser = function (id) {
                // 加载用户详情
                window.api.user.getById(id)
                    .then(user => {
                        if (user) {
                            // 填充表单
                            $('#user-id').val(user.id);
                            $('#username').val(user.username);
                            $('#real-name').val(user.realName);
                            $('#email').val(user.email);
                            $('#phone').val(user.phone);
                            $('#role').val(user.role);
                            // 隐藏密码相关字段
                            $('#password-group').hide();
                            $('#confirm-password-group').hide();
                            // 设置模态框标题
                            $('#modal-title').text('编辑用户');
                            // 显示模态框
                            $('#user-modal').show();
                        } else {
                            alert('未找到用户信息');
                        }
                    })
                    .catch(error => {
                        console.error('Failed to load user info:', error);
                        alert('加载用户信息失败，请重试');
                    });
            };

            /*window.deleteUser = function (id) {
                if (confirm('window.deleteUser(自带)：确定要删除该用户吗？')) {
                    window.api.user.delete(id)
                        .then(response => {
                            if (response) {
                                alert('删除成功');
                                loadUserData();
                            } else {
                                alert('删除失败');
                            }
                        })
                        .catch(error => {
                            console.error('Failed to delete user:', error);
                            alert('删除失败，请重试');
                        });
                }
            };*/

            window.toggleUserStatus = function (id, currentStatus) {
                const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
                const actionText = newStatus === 'active' ? '启用' : '禁用';

                if (confirm(`确定要${actionText}该用户吗？`)) {
                    window.api.user.updateStatus(id, newStatus)
                        .then(response => {
                            if (response) {
                                alert(`${actionText}成功`);
                                loadUserData();
                            } else {
                                alert(`${actionText}失败`);
                            }
                        })
                        .catch(error => {
                            console.error(`Failed to ${actionText} user:`, error);
                            alert(`${actionText}失败，请重试`);
                        });
                }
            };
        });
    </script>

</head>
<body>
<div class="app-container">
    <header class="app-header">
        <div class="logo">员工管理系统</div>
        <div class="user-info">
            <span id="username-display"></span>
            <button id="logout-btn" class="btn btn-secondary">退出登录</button>
        </div>
    </header>


    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="page-header mb-4">
                <div class="row">
                    <div class="col-md-6">
                        <h2>用户管理</h2>
                    </div>
                    <div class="col-md-6 text-md-end mt-2 mt-md-0">
                        <a href="#" class="btn btn-primary" id="add-user-btn">
                            <i class="fas fa-plus"></i> 添加用户
                        </a>
                    </div>
                </div>
            </div>

            <div class="search-bar card mb-4 p-3">
                <div class="input-group">
                    <input type="text" id="search-input" class="form-control" placeholder="搜索用户名、邮箱或手机号">
                    <button id="search-btn" class="btn btn-secondary">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button id="reset-btn" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> 重置
                    </button>
                </div>
            </div>

            <div class="table-container">
                <table class="table table-striped table-hover data-table">
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>邮箱</th>
                        <th>手机号</th>
                        <th>角色</th>
<!--                        <th>状态</th>-->
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="user-table-body">

                    <!-- 数据将通过JavaScript动态加载 -->


                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="pagination d-flex justify-content-between align-items-center">

                    <!-- 新增：隐藏存储总记录数 -->

                    <span id="total-users" style="display: none;"></span>

                    <div class="page-info">第 <span id="current-page"></span> 页 / 共 <span id="total-pages"></span> 页
                    </div>

                    <div class="page-controls">
                        <button class="btn btn-secondary" id="prev-page">上一页</button>
                        <span id="page-info">第 1 页 / 共 0 页</span>
                        <button class="btn btn-secondary" id="next-page">下一页</button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <!-- tabindex="-1" 会阻止元素被键盘焦点选中，移除或设为 0 后，模态框内部元素（如输入框）更易获得焦点。-->
    <div class="modal fade" id="user-modal" tabindex="0" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">添加用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="user-form">
                        <input type="hidden" id="user-id" name="id">
                        <div class="form-group">
                            <label for="username">用户名 <span style="color: red;">*</span></label>
                            <input type="text" id="username" name="username" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="real-name">真实姓名 <span style="color: red;">*</span></label>
                            <input type="text" id="real-name" name="realName" placeholder="请输入真实姓名">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱 <span style="color: red;">*</span></label>
                            <input type="email" id="email" name="email" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号 <span style="color: red;">*</span></label>
                            <input type="tel" id="phone" name="phone" placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label for="role">角色 <span style="color: red;">*</span></label>
                            <select id="role" name="role">
                                <option value="">请选择角色</option>
                                <option value="admin">管理员</option>
                                <option value="manager">经理</option>
                                <option value="staff">员工</option>
                            </select>
                        </div>
                        <div class="form-group" id="password-group">
                            <label for="password">密码 <span style="color: red;">*</span></label>
                            <input type="password" id="password" name="password" placeholder="请输入密码">
                        </div>
                        <div class="form-group" id="confirm-password-group">
                            <label for="confirm-password">确认密码 <span style="color: red;">*</span></label>
                            <input type="password" id="confirm-password" name="confirmPassword"
                                   placeholder="请确认密码">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="save-user-btn" class="btn btn-primary">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <button id="cancel-btn" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> 取消
                    </button>
                </div>
            </div>
        </div>


    </div>

</div>
</body>
</html>